<template>
  <div>
    <a-card class="card">
      <template slot="title" >
        <span style="display:flex;align-items: center;">
          设计师图表数据
          <a-tooltip style="margin-left:6px;">
            <template slot="title">
              设计师图表数据
            </template>
            <a-icon style="cursor: pointer;" type="exclamation-circle" :style="{ fontSize: '12px',color:'#888888' }"/>
          </a-tooltip>
        </span>
      </template>
      <a-range-picker
        :ranges="{ '昨天': [moment().add(-1, 'days'), moment().add(-1, 'days')], '过去7天': [moment().add(-7, 'days'), moment().add(-1, 'days')], 
                  '过去30天': [moment().add(-30, 'days'), moment().add(-1, 'days')] }"
        :disabled-date="disabledDate" @change="formDateChange" style="width:240px;" 
      />
      <a-select v-model="key" style="width: 120px;margin-left:10px;" @change="getAllNew">
        <a-select-option value="quantity">视频数</a-select-option>
        <a-select-option value="price">金额</a-select-option>
      </a-select>
      <div id="chart-main" style="height:500px"></div>
    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
import createChart from './createChart'
import {getDataList} from '@/api/shumei/shumei'
let Chart = new createChart()

export default {
  name:'addDataChart',
  data(){
    return{
      moment,
      key:'quantity',
      form:{
        start_date: "",
        end_date: "",
      },
    }
  },
  created(){
  },
  mounted(){
    setTimeout(() => {
      var chartDom = document.getElementById('chart-main');
      Chart.init(chartDom)
      this.getAllNew()
    }, 0);
  },
  methods:{
    formDateChange(e){
      this.form.start_date = e[0].format("YYYY-MM-DD")
      this.form.end_date = e[1].format("YYYY-MM-DD")
      this.getAllNew()
    },
    getAllNew(){
      getDataList(this.form).then((res) => {
        if(res.errcode == 0){
          // chart 数据处理
          let legendData = [this.key=='quantity'?'视频数':'金额'] 
          let ziduan = [this.key]
          let xAxisData = new Set()
          let series = []
          for(let item of res.data){
            xAxisData.add(item.name)
          }
          xAxisData = [...xAxisData].sort((a,b) => a.localeCompare(b))

          for(let i in ziduan){
            let data = []
            for (let name of [...xAxisData]){
              // 找到人名下的所有条目->获取指定字段的值->求和作为series中data的一部分
              let count = 0
              res.data.filter(e=>e.name == name).map(e=>e[ziduan[i]]).forEach(n => {
                count += parseFloat(n) 
              });
              data.push(count)
            }
            series.push({
              name: legendData[i],
              data,
            })
          }
          
          // console.log([...xAxisData], series)
          this.setOption(legendData, [...xAxisData], series)
        }
      }).catch(() => {
        
      });
    },
    setOption(legendData, xAxisData, series){
      Chart.setOption(legendData, xAxisData, series)
    },
    disabledDate(current){
      return current && current > moment().endOf('day');
    },
  }
}
</script>

<style lang="less" scoped>

</style>